<template>
    <el-container id='app' class="container">
        <el-header height="80px"><my-header></my-header></el-header>
        <el-main>
            <div class="layout" :style="mainStyle">
                <router-view></router-view>
            </div>
            <my-footer></my-footer>
            <el-backtop target=".el-main" :bottom="backBottom">
                <img src="./assets/goTop.png" alt="">
            </el-backtop>
        </el-main>
        <Login v-if="loginDialogVisible"></Login>
        <play-bar v-show="isShowPlayBar"></play-bar>
    </el-container>
</template>

<script>
import myHeader from '@components/common/header.vue'
import myFooter from '@components/common/footer.vue'
import playBar from '@components/common/play-bar.vue'
import Login from '@components/common/login.vue'
import { mapGetters, mapMutations } from 'vuex'
export default {
    name: 'app',
    components: {
        myHeader,
        myFooter,
        Login,
        playBar
    },
    data () {
        // 这里存放数据
        return {
            backBottom: 80,
            mainStyle: ''
        }
    },
    // 监听属性 类似于data概念
    computed: {
        ...mapGetters(['isLogin', 'userInfo', 'loginDialogVisible']),
        isShowPlayBar () {
            return this.$route.path !== '/mv' && this.$route.path !== '/video'
        }
    },
    /**
     * 刷新页面
     */
     mounted () {
        window.console.log('刷新页面', this)
        const urlParams = {}
        const query = window.location.search.substring(1)
        const vars = query.split('&')
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=')
            if (pair.length >= 2 && pair[0] && pair[1]) {
                urlParams[pair[0]] = pair[1]
            }
        }
        console.log('[信息]启动参数', urlParams)

        if (this.$http.env() === 'node') {
            this.mainStyle = 'top: 30px;'
        }
        if (window.localStorage.token) {
            this.$ichat.onMessage = this.onMessage
            this.$ichat.link()
        }
        if (window.localStorage.LOGIN_RESULT) {
            const userInfo = JSON.parse(window.localStorage.LOGIN_RESULT)
            this.setUserInfo(userInfo)
            this.setLoginDialog(false)
            this.setLogin(true)
        }
        if (urlParams.guest === 'true') {
            // 启动来宾登录
            this.$http.login({
                username: 'guest',
                password: 'guest',
                vercode: 'guest'
            }).then(data => {
                const res = data.data
                window.console.log('[信息]登录返回信息', res)
                if (res.code !== 200) {
                    this.$msg.error(res.message)
                } else {
                    window.localStorage.setItem('LOGIN_RESULT', JSON.stringify(res.result))
                    window.localStorage.setItem('token', res.result.token)
                    window.sessionStorage.setItem('cookie', res.result.cookie)
                    window.localStorage.setItem('userId', res.result.loginCode)
                    window.localStorage.setItem('userInfo', JSON.stringify(res.result))
                    this.setLogin(true)
                    this.setUserInfo(res.result)
                    this.setLoginDialog(false)
                    window.localStorage.setItem('isLogin', true)
                    this.$http.reLoadInstance()
                    window.console.log('[信息]登录保存信息', window.localStorage.userId, window.localStorage.token)
                    window.location.href = window.location.origin + window.location.pathname
                }
            })
        }
    },
    // 方法集合
    methods: {
        ...mapMutations(['setLogin', 'setUserInfo', 'setLoginDialog']),
        /**
         * 自定义消息处理对象
         */
        onMessage: function (res, event) {
            if (res.content) {
                this.$msg.success(res.content)
            }
        }
    }
}
</script>
<style scoped>
.container {
    height: 100%;
}
.layout {
    min-height: calc(100vh - 80px - 40px);
    position: relative;
}
</style>
